<template>
    <div class="pad">
        <!-- search start -->
        <searchBar
            placeHolder="请输入车主姓名"
            @handleSearch="init"
            :isShowDate="false"
        />
        <!-- search end -->
        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            v-loading="loading"
            :pageCount.sync="tableData.rows"
            @handleDetail="handleDetail"
            @through="through"
            @reject="reject"
        />
        <!-- table end -->
        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowDialog"
            v-el-drag-dialog
            center
            title="详情"
            width="38%"
        >
        <el-form label-width='80px' label-position="left" v-loading="detailLoading" class="showImage">
            <el-form-item label="保单图片:">
                <img v-for='(item, index) of detailImages' :src="item" class="detailImg" :key="index"/>
            </el-form-item>
            <el-form-item label="投保时间:">
                {{detailData.start_time}} —— {{detailData.end_time}}
            </el-form-item>
            <el-form-item label="投保险种:">
                {{name_price.type}}
            </el-form-item>
            <el-form-item label="投保金额:">
                {{name_price.value}}
            </el-form-item>
        </el-form>
        </el-dialog>
            <!-- reject dialog  -->
            <el-dialog
                :visible.sync="reasonDialog"
                center
                title="驳回理由"
                width="30%"
                top="30vh"
                v-el-drag-dialog
                @close="$refs['form'].resetFields()"
            >
                <el-form
                        label-width="90px"
                        :model="reasonText"
                        ref="form"
                >
                    <el-form-item
                            label="驳回理由:"
                            :rules="[
                                {required: true,message: '请填写驳回理由', trigger: 'blur'}
                            ]"
                            prop="reason"
                    >
                        <el-input v-model="reasonText.reason" style="width:68%;margin-right:5%;"></el-input>
                        <el-button type="danger" @click="configReject">驳回</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css'
    export default {
        name: "insurance_audit",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '车主姓名',
                        prop: 'name'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: ' 车型',
                        prop: 'car_type'
                    },
                    {
                        label: '保单号',
                        prop: 'policy_num'
                    },
                    {
                        label: '保险公司名称',
                        prop: 'company'
                    },
                    {
                        label: '保单总金额',
                        prop: 'total'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '详情',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    },
                    {
                        label: '操作',
                        prop: '',
                        ownerThroughReject: true
                    }
                ],
                loading: false,
                detailData: {},
                detailLoading: false,
                isShowDialog: false,
                detailImages: [],
                name_price: {},
                reasonDialog: false,
                reasonText: {
                    reason: ''
                },
                id: '',
                name: ''
            }
        },
        methods: {
            async init ( search = '' ) {
                this.loading = true;
                let paramsStr = {page: this.page,pageSize: this.pageSize, key: search['search']};
                let res = await this.api.awaitList(paramsStr);
                if ( res.code ) {
                    this.tableData = res.data;
                } else {
                    this.$message(res.msg)
                }
                this.loading = false;
            },
            async handleDetail (...value) { //查看详情
                this.detailLoading = true;
                this.isShowDialog = true;
                let res = await this.api.owner_getPolicyDetail({id: value[1]['id']});
                if( res.code ) {
                    this.detailData = res.data;
                    this.detailImages = res.data.pc_img;
                    this.name_price = res.data.name_price[0];
                    setTimeout(() => {
                        new Viewer(document.querySelector(".showImage"),{})
                    }, 500);
                    this.detailLoading = false
                }else this.$message(res.msg);
            },
            async through (...value) {
                this.$confirm('确定通过吗？','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=> {
                    new Promise((res) => {
                        let result = this.api.owner_Audit({id: value[0]['id'], name: value[0]['name']});
                        res(result)
                    }).then((res) => {
                        this.$message({
                            type: res.code ? 'success' : 'error',
                            message: res.msg
                        });
                        this.init();
                    })
                }).catch(() => {})

            },
            reject (...value) {
                this.reasonDialog = true;
                this.id = value[0]['id'];
                this.name = value[0]['name'];
            },
            async configReject () {
                let flag = true;
                this.$refs['form'].validate((valid) => {
                    !valid ? flag = false : flag
                })
                if(flag) {
                    let res = await this.api.owner_rejectAudit({id: this.id, reason: this.reasonText.reason, name: this.name});
                    this.$message({
                        type: res.code ? 'success' : 'error',
                        message: res.msg
                    });
                    this.init();
                    this.reasonDialog = false;
                }
            }
        },
        mounted () {
            this.init();
        },
        watch: {
            page () {
                this.init();
            },
            pageSize () {
                this.init();
            }
        }

    }
</script>

<style scoped>
    .pad {
        padding: 10px;
    }
    .detailImg {
        width:100px;
        margin-right:5px;
    }
    .showImage img{
        cursor:pointer;
    }
</style>
